<template>
  <div>
    <ul class="sonModuleContainer clearfix">
      <li
        v-for="article in articles"
        :key="article.articleId"
        class="sonModuleItem fl"
      >
        <el-card
          shadow="hover"
          :body-style="{
            padding: '10px',
            width: '250px',
          }"
        >
          <h6 class="shareTitle">{{ article.title }}</h6>
          <p class="sonText">{{ article.summary }}</p>
          <span>{{ article.postTime }}</span>
          <span class="fr looktag">查看</span>
        </el-card>
      </li>
    </ul>
    <div class="mauto">
      <div class="mauto" style="width: 100%">
        <el-pagination
          :current-page="currentPage"
          :total="totalRecords"
          :page-size="limit"
          :page-sizes="[12, 24, 36, 48, 60, 72, 84]"
          style="margin: 30px 0; text-align: center"
          layout="sizes,prev,pager,next,jumper,->,total,slot"
          @current-change="changeCurrentPage"
          @size-change="changeSize"
        />
      </div>
    </div>
  </div>
</template>

<script>
import searchApi from "@/api/searchApi";
export default {
  name: "nstudent",
  data() {
    return {
      currentPage: 1,
      totalRecords: 100,
      limit: 12,
    };
  },
  created() {
    this.search();
  },
  methods: {
    toLookPost() {
      this.$router.push({
        name: "lookpost",
      });
    },
    changeSize(size) {
      this.limit = size;
      this.search();
    },
    changeCurrentPage(currentPage) {
      this.changeCurrentPage = currentPage;
      this.search();
    },
    search() {
      var title = sessionStorage.getItem("searchInput");
      var pBoardId = sessionStorage.getItem("pBoardId");
      var findType = sessionStorage.getItem("findType");
      if (title == null || title == "") {
        title = "";
      }
      if (pBoardId == null || pBoardId == "") {
        pBoardId = 0;
      }
      if (findType == null || findType == "") {
        findType = 0;
      }
      this.selectBoardEssay(
        title,
        findType,
        this.currentPage,
        this.limit,
        pBoardId
      );
    },
    selectBoardEssay(title, findType, pageNum, pageSize, pBoardId) {
      searchApi
        .selectBoardEssay(title, findType, pageNum, pageSize, pBoardId)
        .then((response) => {
          this.articles = response.data.records;
          this.totalRecords = response.data.size;
        });
    },
  },
};
</script>

<style scoped>
.sonModuleContainer {
  padding-left: 20px;
}
.sonModuleItem {
  margin: 20px 0 0 30px;
  /* margin-right: 25px;
  margin-top: 20px; */
}
.sonModuleItem:hover {
  cursor: pointer;
}
.sonText {
  margin: 10px 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #97a3ad;
}
.shareTitle {
  /* 主要代码 */
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  /* 几行后显示省略号 */
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}
.looktag {
  border-radius: 2px;
  padding: 3px 5px;
  color: #fc5531;
  background-color: #feddd6;
  font-size: 12px;
}

.el-carousel__item h3 {
  color: #475669;
  font-size: 18px;
  opacity: 0.75;
  line-height: 300px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}

.mauto {
  margin: 0 auto;
  margin-top: 20px;
  width: 55%;
}
</style>
